<template>
    <!-- 员工后台:活动报名审批 -->
    <div class="container">
        <div style="display: flex;justify-content: space-around; align-items: center;">
            <el-input v-model="createSearch" style="width: 250px;" placeholder="请输入申请日期..."></el-input>
            <el-input v-model="nameSearch" style="width: 250px;" placeholder="请输入活动名称..."></el-input>
            <el-input v-model="startSearch" style="width: 250px;" placeholder="请输入开始时间..."></el-input>
            <el-input v-model="olderSearch" style="width: 250px;" placeholder="请输入申请人..."></el-input>
        </div>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            height="93%"
            fixed>

            <el-table-column
            prop="create_time"
            label="申请日期"
            width="150"
            sortable>
            <template slot-scope="scope">
                <el-tag type="warning" size="medium">{{ scope.row.create_time }}</el-tag>
            </template>
            </el-table-column>

            <el-table-column
            label="活动图片"
            width="105"
            >
            <template slot-scope="scope">
                <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.active_image_one"
                fit="fill"></el-image>
            </template>
            </el-table-column>

            <el-table-column
            width="105"
            >
            <template slot-scope="scope">
                <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.active_image_two"
                fit="fill"></el-image>
            </template>
            </el-table-column>

            <el-table-column
            prop="active_name"
            label="活动名称"
            width="180"
            show-overflow-tooltip>
            </el-table-column>

            <el-table-column
            prop="active_address"
            label="活动地址"
            width="220"
            show-overflow-tooltip>
            </el-table-column>

            <el-table-column
            prop="start_time"
            label="开始时间"
            width="110"
            sortable>
            </el-table-column>

            <el-table-column
            prop="end_time"
            label="结束时间"
            width="110"
            sortable>
            </el-table-column>

            <el-table-column
            prop="status"
            label="活动状态"
            width="90">
            </el-table-column>

            <el-table-column
            label="申请人"
            width="150"
            show-overflow-tooltip>
            <template slot-scope="scope">
                <el-tag size="medium">{{ scope.row.older_name }}</el-tag>
            </template>
            </el-table-column>

            <el-table-column
            prop="is_prove"
            label="审批状态"
            width="110"
            sortable>
            <template slot-scope="scope">
                <el-tag :type="checkTypeColor(scope.row.is_prove)" size="medium">{{ scope.row.is_prove }}</el-tag>
            </template>
            </el-table-column>

            <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="allowJoin(scope.row)" type="text" size="small">通 过</el-button>
                    <el-button @click="refuseJoin(scope.row)" type="text" size="small">拒 绝</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    export default {
        name:'StatusEmployeeProveJoin',
        data() {
            return {
                // 用于展示
                tableData: [],
                // 用于存放数据
                allTableDate:[],
                // 通过申请日期模糊查询
                createSearch:'',
                // 通过活动名模糊查询
                nameSearch:'',
                // 通过开始时间模糊查询
                startSearch:'',
                // 通过申请人模糊查询
                olderSearch:''
            }
        },
        watch:{
            createSearch(newValue){
                this.tableData = this.allTableDate.filter((item)=>{
                    return item.create_time.indexOf(newValue) !== -1;
                })
            },
            nameSearch(newValue){
                this.tableData = this.allTableDate.filter((item)=>{
                    return item.active_name.indexOf(newValue) !== -1;
                })
            },
            startSearch(newValue){
                this.tableData = this.allTableDate.filter((item)=>{
                    return item.start_time.indexOf(newValue) !== -1;
                })
            },
            olderSearch(newValue){
                this.tableData = this.allTableDate.filter((item)=>{
                    return item.older_name.indexOf(newValue) !== -1;
                })
            },
        },
        methods: {
            // 通过按钮
            allowJoin(row) {
                myAxios(
                    'http://localhost:8088/employee/olderjoinactiveprove?id='+row.id+'&flag=1',
                    'get',
                    null,
                    (data)=>{
                        // 提示一下
                        this.$message({
                            message: '完成审批:通过!',
                            type: 'success'
                        });
                        row.is_prove = '已通过';
                    }
                )
            },
            // 拒绝按钮
            refuseJoin(row){
                myAxios(
                    'http://localhost:8088/employee/olderjoinactiveprove?id='+row.id+'&flag=0',
                    'get',
                    null,
                    (data)=>{
                        // 提示一下
                        this.$message({
                            message: '完成审批:拒绝!',
                            type: 'danger'
                        });
                        row.is_prove = '已拒绝';
                    }
                )
            },
            // 检查审批状态
            checkTypeColor(data){
                if(data === '未处理'){
                    return 'warning'
                }else if(data === '已通过'){
                    return 'success'
                }else{
                    return 'danger'
                }
            }
        },
        mounted(){
            // 查询老人报名活动的详细信息
            const id = JSON.parse(sessionStorage.getItem('user')).id;
            myAxios(
                'http://localhost:8088/older/getjoinactiveonolder?id='+id,
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        // 提示一下
                        this.$message({
                            message: '没有老人报名活动!',
                            type: 'warning'
                        });
                    }else{
                        this.allTableDate = data;
                        this.tableData = data;
                    }
                }
            )
        }
    }
</script>

<style lang="less" scoped>
.container{
    width: 98%;
    height: 660px;
    background-color: white;
    padding: 15px;
    border-radius: 15px;

}
</style>